<template>
    <div>
        <h2>当前求和为:{{$store.state.count}}</h2>
        <div>
            <select :value="x">
                <option value=1>1</option>
                <option value=2>2</option>
                <option value=3>3</option>
            </select>
            <button @click="add">+</button>
            <button @click="reduce">-</button>
            <button @click="oddAdd">当前求和为奇数再加</button>
            <button @click="waitAdd">等一等再加</button>
        </div>
        
    </div>
</template>
<script>
    

    export default {
        name:'App',
        // 此时count 需要放到vuex的state中 因为是多组件需要使用
        data() {
            return {
                x:1,
            }
        },
        methods: {
            add(){
                this.$store.dispatch('jia',this.x)
            },
            reduce(){
                this.$store.dispatch('jian',this.x)
                
            },
            oddAdd(){
                this.$store.dispatch('oddAdd',this.x)
            },
            waitAdd(){
                this.$store.dispatch('waitAdd',this.x)
            }
        },
        mounted() {
            // vc上成功挂载$store属性
            //console.log(this)
        },
    }
</script>
<style>
    
</style>